<template>
    <div class="singer-home">
        <!-- 导航页 -->
        <van-nav-bar title="歌单详情" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="list">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <div v-for="(item, index) in listData" :key="index" :title="item" class="song">
                    <div class="right">
                        <h3>{{ item.name }}</h3>
                        <div class="singers">
                            <span>
                                {{ item.al.name }}
                                <!-- <span v-show="index != item.singer.length - 1">/</span> -->
                            </span>
                        </div>
                    </div>
                    <div class="left">
                        <img :src="item.al.picUrl" alt="">
                    </div>


                </div>
            </van-list>
        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            listData: [],//vant的list列表数据
            loading: false,
            finished: false,
            page: 1,//获取api数据的页码
        }
    },
    created() {
        this.getData()
        console.log(this.id)
        // this.getSingerListData()
    },
    methods: {
        getData() {
            this.$request(
                "get",
                "/artist/top/song?id=" + this.$route.params.id
            ).then((code) => {
                console.log(code)
                this.listData = code.songs
            })
        },
        onLoad() {
            setTimeout(() => {
                this.getData();//调用获取分页数据的方法
                this.loading = true;//正在加载
            }, 1000)
        },
        onClickLeft() {
            window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
        },
    }
}
</script>


<style scoped>
.song {
    height: 130px;
}

.left {
    float: right;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 23px;
    /* margin-bottom: 23px; */
    border-radius: 100%;
    width: 91.5px;
    height: 91.5px;
    /* width: 26%;
    height: 100%; */
    overflow: hidden;
    padding: 0;

}

.left>img {
    height: 100%;
}

.right {
    /* float: left; */
    float: right;
    width: 60%;
    height: 91.5px;
    padding-top: 28.2px;
    padding-bottom: 28.2px;
}

.right>h3 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.singers {
    margin-top: 15px;
    /* margin-bottom: px; */
}
</style>